<template>
  <div class="chart-container">
    <h3>用户增长趋势（折线图）</h3>
    <BaseChart :option="option" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseChart from './BaseChart.vue'

const option = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['新增用户', '活跃用户']
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    name: '用户数'
  },
  series: [
    {
      name: '新增用户',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210],
      smooth: true,
      lineStyle: {
        width: 3
      },
      symbolSize: 8
    },
    {
      name: '活跃用户',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310],
      smooth: true,
      lineStyle: {
        width: 3
      },
      symbolSize: 8
    }
  ]
})
</script>

<style scoped>
.chart-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>